<template>
  <div class="dashboard-container">
    <div class="animated-bg"></div>
    <div class="grid-overlay"></div>

    <header class="dashboard-header">
      <h1>电力负荷预测实时大屏</h1>
      <div class="system-time">{{ currentSystemTime }}</div>
    </header>

    <main class="dashboard-main">
      <aside class="left-panel">
        <section class="card key-metrics-grid">
          <div class="metric-card" v-for="(metric, index) in keyMetrics" :key="index">
            <div class="value">{{ metric.value }} <span class="unit">{{ metric.unit }}</span></div>
            <div class="label">{{ metric.label }}</div>
          </div>
        </section>

        <section class="card alert-zone" v-if="alerts.length > 0">
          <h3 class="card-title">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"></path>
              <line x1="12" y1="9" x2="12" y2="13"></line>
              <line x1="12" y1="17" x2="12.01" y2="17"></line>
            </svg>
            异常预警
          </h3>
          <ul>
            <li v-for="(alert, index) in alerts" :key="index" :class="`alert-item alert-${alert.level}`">
              {{ alert.message }}
            </li>
          </ul>
        </section>

        <section class="card trend-extension">
          <h3 class="card-title">未来7天负荷峰值趋势</h3>
          <v-chart class="small-chart" :option="sevenDayTrendOption" autoresize />
        </section>
      </aside>

      <div class="center-panel">
        <section class="card main-chart-container">
          <div class="chart-container" ref="chartContainer"></div>
          <div class="chart-controls">
            <div class="control-group">
              <label>模拟控制:</label>
              <button @click="toggleSimulation" :disabled="!isDataLoaded" class="sim-btn">
                {{ simulationState === 'running' ? '暂停' : '播放' }}
              </button>
              <button @click="resetSimulation" :disabled="!isDataLoaded" class="sim-btn">重置</button>
            </div>
            <div class="control-group">
              <label>模拟速度:</label>
              <select v-model="simulationSpeed" :disabled="!isDataLoaded" class="custom-select">
                <option :value="1 / 60">1/60分钟/秒</option>
                <option :value="1">1分钟/秒</option>
                <option :value="15">15分钟/秒</option>
                <option :value="60">1小时/秒</option>
                <option :value="3600">1天/秒</option>
              </select>
            </div>
            <div class="control-group">
              <label>区域/类型:</label>
              <select v-model="selectedArea" class="custom-select">
                <option value="all">全区</option>
                <option value="area_a">A区</option>
                <option value="area_b">B区</option>
              </select>
            </div>
            <div class="control-group">
              <label>自动更新:</label>
              <label class="switch">
                <input type="checkbox" v-model="isAutoUpdateEnabled">
                <span class="slider"></span>
              </label>
            </div>
          </div>
          <div class="simulation-info" v-if="isDataLoaded">
            <strong>模拟时间:</strong> {{ simulationClock.format('YYYY-MM-DD HH:mm') }}
          </div>
          <div v-if="!isDataLoaded" class="loading-text">
            正在加载数据...
          </div>
        </section>

        <footer class="dashboard-footer">
          <div class="footer-info">
            <span>模型: LSTM v2.1 (每15分钟更新)</span>
            <span>数据来源: JSON文件 / 5天历史数据</span>
          </div>
          <div class="update-status">
            数据更新于: {{ lastUpdateTime }} ({{ nextUpdateCountdown }}s 后更新)
          </div>
        </footer>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed, watch } from 'vue';
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { LineChart, BarChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  MarkLineComponent,
  MarkPointComponent,
  ToolboxComponent
} from 'echarts/components';
import VChart from 'vue-echarts';
import * as echarts from 'echarts';
import axios from 'axios';
import dayjs from 'dayjs';

// ECharts 按需引入
use([
  CanvasRenderer,
  LineChart,
  BarChart,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  MarkLineComponent,
  MarkPointComponent,
  ToolboxComponent,
]);

// --- 基础状态管理 ---
const UPDATE_INTERVAL = 15 * 1000; // 演示用15秒，实际应为 15 * 60 * 1000
let dataTimer = null;
let clockTimer = null;
let simulationTimer = null;

const currentSystemTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'));
const lastUpdateTime = ref('--:--:--');
const nextUpdateCountdown = ref(UPDATE_INTERVAL / 1000);

// --- 主图表相关状态 ---
const chartContainer = ref(null);
let chartInstance = null;
const isDataLoaded = ref(false);
const simulationState = ref('paused'); // 'paused', 'running'
const simulationSpeed = ref(60); // 模拟分钟数 per second

// --- 数据存储 ---
let masterData = {
  actual: [],
  predicted: [],
  errors: [],
};
let simulationStartDate = dayjs();
const simulationClock = ref(dayjs());

// --- 原有状态保留 ---
const keyMetrics = ref([
  { value: '342.5', unit: 'kW', label: '当前 (14:30) 实际负荷' },
  { value: '458.2', unit: 'kW', label: '未来24H预测峰值 (18:45)' },
  { value: '287.1', unit: 'kW', label: '未来24H预测谷值 (03:15)' },
  { value: '96.8', unit: '%', label: '近24H预测准确率 (MAPE)' }
]);

const alerts = ref([
  { level: 'warning', message: '预警: 未来1小时负荷预计骤增 35%' },
  { level: 'error', message: '提醒: 14:15 时刻实际与预测偏差超10%' }
]);

const selectedArea = ref('all');
const isAutoUpdateEnabled = ref(true);

// --- 数据加载和处理 ---
const loadAndProcessData = async () => {
  try {
    const response = await axios.get('/load_forecast_5days.json');
    const rawData = response.data;

    simulationStartDate = dayjs('2025-07-10');
    simulationClock.value = simulationStartDate;

    masterData.actual = [];
    masterData.predicted = [];
    masterData.errors = [];

    for (let i = 0; i < rawData.time_hours.length; i++) {
      const timestamp = simulationStartDate.add(rawData.time_hours[i], 'hour').valueOf();

      masterData.actual.push([timestamp, rawData.actual_load[i]]);
      masterData.predicted.push([timestamp, rawData.predicted_load[i]]);

      const actual = rawData.actual_load[i];
      const error = rawData.errors[i];
      masterData.errors.push([timestamp, [actual - error, actual + error]]);
    }

    isDataLoaded.value = true;
    updateKeyMetricsFromData();
    updateChartsFromData();
    console.log('5天数据加载并处理完毕!');
  } catch (error) {
    console.error('获取或处理图表数据失败:', error);
    alert('无法加载数据文件，请检查 public/load_forecast_5days.json 文件是否存在。');
  }
};

// --- 主图表初始化 ---
const initChart = () => {
  if (!chartContainer.value) return;
  chartInstance = echarts.init(chartContainer.value);

  const option = {
    backgroundColor: 'transparent',
    title: {
      text: '电力负荷动态预测可视化',
      left: 'center',
      textStyle: {
        color: '#00d4ff',
        fontSize: 18,
        fontWeight: 'bold'
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'cross' },
      backgroundColor: 'rgba(10, 10, 15, 0.95)',
      borderColor: '#00d4ff',
      borderWidth: 1,
      textStyle: {
        color: '#ffffff',
        fontSize: 14
      }
    },
    legend: {
      data: ['历史真实负荷', '未来预测负荷', '误差范围'],
      top: 40,
      textStyle: {
        color: '#ffffff',
        fontSize: 13
      }
    },
    grid: {
      left: '8%',
      right: '5%',
      bottom: '15%',
      top: '20%',
      containLabel: true
    },
    xAxis: {
      type: 'time',
      name: '时间',
      nameTextStyle: {
        color: '#a0a0ff',
        fontSize: 14
      },
      axisLabel: {
        formatter: '{MM}-{dd} {HH}:{mm}',
        color: '#a0a0ff',
        fontSize: 12
      },
      axisLine: {
        lineStyle: {
          color: '#00d4ff'
        }
      },
      splitLine: { show: false }
    },
    yAxis: {
      type: 'value',
      name: '负荷值 (kW)',
      nameTextStyle: {
        color: '#a0a0ff',
        fontSize: 14
      },
      axisLabel: {
        color: '#a0a0ff',
        fontSize: 12
      },
      axisLine: {
        lineStyle: {
          color: '#00d4ff'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(0, 212, 255, 0.15)',
          type: 'dashed'
        }
      }
    },
    series: [
      {
        name: '历史真实负荷',
        type: 'line',
        data: [],
        smooth: true,
        showSymbol: false,
        lineStyle: {
          color: '#00d4ff',
          width: 3,
          shadowColor: 'rgba(0, 212, 255, 0.3)',
          shadowBlur: 10
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0,
              color: 'rgba(0, 212, 255, 0.3)'
            }, {
              offset: 1,
              color: 'rgba(0, 212, 255, 0.05)'
            }]
          }
        }
      },
      {
        name: '未来预测负荷',
        type: 'line',
        data: [],
        smooth: true,
        showSymbol: false,
        lineStyle: {
          color: '#7c3aed',
          type: 'dashed',
          width: 2,
          shadowColor: 'rgba(124, 58, 237, 0.3)',
          shadowBlur: 8
        }
      },
      {
        name: '误差范围',
        type: 'custom',
        renderItem: (params, api) => {
          const xValue = api.value(0);
          const yValues = api.value(1);
          if (!yValues) return;
          const startPoint = api.coord([xValue, yValues[0]]);
          const endPoint = api.coord([xValue, yValues[1]]);

          return {
            type: 'line',
            shape: { x1: startPoint[0], y1: startPoint[1], x2: endPoint[0], y2: endPoint[1] },
            style: { stroke: '#666666', lineWidth: 1, opacity: 0.6 }
          };
        },
        data: [],
        encode: { x: 0, y: 1 },
        z: -1,
      },
      {
        name: '当前时刻',
        type: 'line',
        markLine: {
          symbol: 'none',
          silent: true,
          lineStyle: { color: '#ff6b35', width: 2 },
          label: {
            position: 'insideEndTop',
            formatter: '{b}',
            color: '#ff6b35'
          },
          data: []
        }
      }
    ]
  };
  chartInstance.setOption(option);
};

// --- 图表更新逻辑 ---
const updateChartDisplay = () => {
  if (!chartInstance || !isDataLoaded.value) return;

  const now = simulationClock.value;
  const windowStart = now.subtract(6, 'hour');
  const windowEnd = now.add(24, 'hour');

  const historyData = masterData.actual.filter(d => d[0] <= now.valueOf());
  const futureData = masterData.predicted.filter(d => d[0] > now.valueOf());
  const errorDataInWindow = masterData.errors.filter(d => d[0] >= windowStart.valueOf() && d[0] <= windowEnd.valueOf());

  const connectingPoint = masterData.predicted.find(d => d[0] > now.valueOf());
  if (connectingPoint) {
    historyData.push(connectingPoint);
    futureData.unshift(connectingPoint);
  }

  chartInstance.setOption({
    xAxis: {
      min: windowStart.valueOf(),
      max: windowEnd.valueOf()
    },
    series: [
      { name: '历史真实负荷', data: historyData },
      { name: '未来预测负荷', data: futureData },
      { name: '误差范围', data: errorDataInWindow },
      { name: '当前时刻', markLine: { data: [{ name: '当前', xAxis: now.valueOf() }] } }
    ]
  });
};

// --- 模拟控制 ---
const runSimulationTick = () => {
  const minutesToAdd = (simulationSpeed.value / 60) * (1000 / 100);
  simulationClock.value = simulationClock.value.add(minutesToAdd, 'minute');

  if (simulationClock.value.valueOf() > masterData.actual[masterData.actual.length - 1][0]) {
    pauseSimulation();
    simulationClock.value = dayjs(masterData.actual[masterData.actual.length - 1][0]);
  }

  updateChartDisplay();
  updateKeyMetricsFromData();
};

const startSimulation = () => {
  if (simulationState.value === 'running') return;
  simulationState.value = 'running';
  simulationTimer = setInterval(runSimulationTick, 100);
};

const pauseSimulation = () => {
  simulationState.value = 'paused';
  clearInterval(simulationTimer);
};

const toggleSimulation = () => {
  if (simulationState.value === 'running') {
    pauseSimulation();
  } else {
    startSimulation();
  }
};

const resetSimulation = () => {
  pauseSimulation();
  simulationClock.value = simulationStartDate;
  updateChartDisplay();
  updateKeyMetricsFromData();
};

// --- 从数据更新关键指标 ---
const updateKeyMetricsFromData = () => {
  if (!isDataLoaded.value) return;

  const now = simulationClock.value;
  const currentPoint = masterData.actual.find(d => Math.abs(d[0] - now.valueOf()) < 3600000); // 1小时内

  if (currentPoint) {
    keyMetrics.value[0] = {
      value: currentPoint[1].toFixed(1),
      unit: 'kW',
      label: `当前 (${now.format('HH:mm')}) 实际负荷`
    };
  }

  const futurePoints = masterData.predicted.filter(d => d[0] > now.valueOf());
  if (futurePoints.length > 0) {
    const peak = futurePoints.reduce((max, p) => p[1] > max[1] ? p : max, futurePoints[0]);
    const trough = futurePoints.reduce((min, p) => p[1] < min[1] ? p : min, futurePoints[0]);

    keyMetrics.value[1] = {
      value: peak[1].toFixed(0),
      unit: 'kW',
      label: `未来24H预测峰值 (${dayjs(peak[0]).format('HH:mm')})`
    };

    keyMetrics.value[2] = {
      value: trough[1].toFixed(0),
      unit: 'kW',
      label: `未来24H预测谷值 (${dayjs(trough[0]).format('HH:mm')})`
    };
  }
};

// --- 原有功能保留 ---
const updateChartsFromData = () => {
  // 更新其他图表和预警逻辑
  checkForAlerts();
  lastUpdateTime.value = dayjs().format('HH:mm:ss');
  nextUpdateCountdown.value = UPDATE_INTERVAL / 1000;
};

const checkForAlerts = () => {
  alerts.value = [];

  // 基于真实数据的预警逻辑
  if (masterData.actual.length > 0 && masterData.predicted.length > 0) {
    const now = simulationClock.value;
    const currentActual = masterData.actual.find(d => Math.abs(d[0] - now.valueOf()) < 3600000);
    const futurePoints = masterData.predicted.filter(d => d[0] > now.valueOf() && d[0] < now.add(1, 'hour').valueOf());

    if (currentActual && futurePoints.length > 0) {
      const maxInHour = Math.max(...futurePoints.map(p => p[1]));
      const increasePercent = ((maxInHour - currentActual[1]) / currentActual[1]) * 100;

      if (increasePercent > 30) {
        alerts.value.push({
          level: 'warning',
          message: `预警: 未来1小时负荷预计骤增 ${increasePercent.toFixed(0)}%`
        });
      }
    }
  }
};

// --- 7天趋势图（保留原有逻辑） ---
const sevenDayTrendOption = computed(() => {
  const days = Array.from({ length: 7 }, (_, i) => dayjs().add(i, 'day').format('MM-DD'));
  const peakData = Array.from({ length: 7 }, () => 400 + Math.random() * 150);
  return {
    backgroundColor: 'transparent',
    grid: {
      top: '20%',
      right: '5%',
      bottom: '25%',
      left: '15%'
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(10, 10, 15, 0.95)',
      borderColor: '#00d4ff',
      textStyle: {
        color: '#ffffff'
      }
    },
    xAxis: {
      type: 'category',
      data: days,
      axisLabel: {
        color: '#a0a0ff',
        fontSize: 11
      },
      axisLine: {
        lineStyle: {
          color: '#00d4ff'
        }
      }
    },
    yAxis: {
      type: 'value',
      name: 'kW',
      nameTextStyle: {
        color: '#a0a0ff'
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(0, 212, 255, 0.1)',
          type: 'dashed'
        }
      },
      axisLabel: {
        color: '#a0a0ff',
        fontSize: 11
      }
    },
    series: [{
      data: peakData,
      type: 'bar',
      barWidth: '60%',
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0,
            color: '#00d4ff'
          }, {
            offset: 1,
            color: '#7c3aed'
          }]
        },
        shadowColor: 'rgba(0, 212, 255, 0.3)',
        shadowBlur: 10
      }
    }]
  };
});

// --- 生命周期钩子 ---
onMounted(async () => {
  initChart();
  await loadAndProcessData();

  if (isDataLoaded.value) {
    updateChartDisplay();
  }

  // 定时更新系统时间
  clockTimer = setInterval(() => {
    currentSystemTime.value = dayjs().format('YYYY-MM-DD HH:mm:ss');
  }, 1000);

  // 定时更新倒计时
  setInterval(() => {
    if (isAutoUpdateEnabled.value && typeof nextUpdateCountdown.value === 'number' && nextUpdateCountdown.value > 1) {
      nextUpdateCountdown.value--;
    }
  }, 1000);

  // 图表自适应
  const resizeHandler = () => chartInstance?.resize();
  window.addEventListener('resize', resizeHandler);

  onUnmounted(() => {
    window.removeEventListener('resize', resizeHandler);
  });
});

onUnmounted(() => {
  clearInterval(dataTimer);
  clearInterval(clockTimer);
  clearInterval(simulationTimer);
  chartInstance?.dispose();
});

// 监听筛选变化
watch(selectedArea, () => {
  console.log(`区域切换到: ${selectedArea.value}`);
  if (isDataLoaded.value) {
    updateChartDisplay();
  }
});
</script>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');

:root {
  --bg-primary: #0a0a0f;
  --bg-secondary: #1a1a2e;
  --bg-card: rgba(26, 26, 46, 0.85);
  --bg-card-hover: rgba(26, 26, 46, 0.95);
  --text-primary: #ffffff;
  --text-secondary: #a0a0ff;
  --text-muted: #7575a3;
  --accent-blue: #00d4ff;
  --accent-purple: #7c3aed;
  --accent-green: #00ff88;
  --accent-orange: #ff6b35;
  --accent-red: #ff3366;
  --accent-yellow: #ffed4a;
  --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --gradient-accent: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  --border-glow: 0 0 20px rgba(0, 212, 255, 0.3);
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 30px rgba(0, 212, 255, 0.2);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.dashboard-container {
  font-family: 'Orbitron', monospace;
  background: var(--bg-primary);
  color: var(--text-primary);
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 20px;
  gap: 20px;
  position: relative;
  overflow: hidden;
}

/* 动态背景 */
.animated-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 20% 30%, rgba(124, 58, 237, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(0, 212, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 40% 80%, rgba(0, 255, 136, 0.05) 0%, transparent 50%);
  animation: backgroundPulse 8s ease-in-out infinite alternate;
  z-index: -1;
}

@keyframes backgroundPulse {
  0% {
    opacity: 0.5;
  }

  100% {
    opacity: 0.8;
  }
}

.grid-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(rgba(0, 212, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 255, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  z-index: -1;
}

/* 头部样式 */
.dashboard-header {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 80px;
  background: var(--bg-card);
  border: 1px solid rgba(0, 213, 255, 0.595);
  border-radius: 15px;
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(10px);
}

.dashboard-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-accent);
  border-radius: 15px 15px 0 0;
}

.dashboard-header h1 {
  font-size: 2.5rem;
  font-weight: 900;
  color: #000;
  /* 设置为黑色 */
  /* background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text; */
  text-shadow: 0 0 30px rgba(0, 212, 255, 0.5);
  letter-spacing: 3px;
  animation: titleGlow 3s ease-in-out infinite alternate;
}

@keyframes titleGlow {
  0% {
    filter: drop-shadow(0 0 10px rgba(0, 212, 255, 0.5));
  }

  100% {
    filter: drop-shadow(0 0 20px rgba(0, 212, 255, 0.8));
  }
}

.system-time {
  position: absolute;
  right: 100px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  color: var(--accent-blue);
  background: rgba(0, 212, 255, 0.1);
  padding: 8px 15px;
  border-radius: 20px;
  border: 1px solid rgba(0, 212, 255, 0.3);
  animation: timePulse 2s ease-in-out infinite;
}

@keyframes timePulse {

  0%,
  100% {
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
  }

  50% {
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.6);
  }
}

/* 主体布局 */
.dashboard-main {
  display: flex;
  flex: 1;
  gap: 20px;
  min-height: 0;
}

/* 卡片通用样式 */
.card {
  background: var(--bg-card);
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: 15px;
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(10px);
  padding: 20px;
  position: relative;
  transition: all 0.3s ease;
}

.card:hover {
  background: var(--bg-card-hover);
  border-color: rgba(0, 212, 255, 0.5);
  box-shadow: var(--shadow-glow);
  transform: translateY(-2px);
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-accent);
  border-radius: 15px 15px 0 0;
  opacity: 0.7;
}

.card-title {
  font-size: 1.1rem;
  color: var(--accent-blue);
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

.card-title svg {
  filter: drop-shadow(0 0 5px rgba(0, 212, 255, 0.5));
}

/* 左侧面板 */
.left-panel {
  width: 350px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 关键指标网格 */
.key-metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  padding: 15px;
}

.metric-card {
  background: rgba(0, 212, 255, 0.05);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.metric-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.1), transparent);
  transition: left 0.6s ease;
}

.metric-card:hover::before {
  left: 100%;
}

.metric-card:hover {
  background: rgba(0, 212, 255, 0.1);
  border-color: rgba(0, 212, 255, 0.4);
  transform: scale(1.05);
  box-shadow: 0 5px 20px rgba(0, 212, 255, 0.3);
}

.metric-card .value {
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--accent-blue);
  margin-bottom: 8px;
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

.metric-card .unit {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 400;
}

.metric-card .label {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.3;
}

/* 预警区域 */
.alert-zone {
  animation: alertPulse 2s ease-in-out infinite;
}

@keyframes alertPulse {

  0%,
  100% {
    border-color: rgba(255, 99, 54, 0.3);
  }

  50% {
    border-color: rgba(255, 99, 54, 0.6);
  }
}

.alert-zone ul {
  list-style: none;
  padding: 0;
}

.alert-item {
  padding: 12px 15px;
  margin: 8px 0;
  border-radius: 8px;
  font-size: 0.9rem;
  border-left: 4px solid;
  position: relative;
  animation: slideInLeft 0.5s ease;
}

@keyframes slideInLeft {
  from {
    transform: translateX(-20px);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.alert-warning {
  background: rgba(255, 237, 74, 0.1);
  border-left-color: var(--accent-yellow);
  color: var(--accent-yellow);
}

.alert-error {
  background: rgba(255, 51, 102, 0.1);
  border-left-color: var(--accent-red);
  color: var(--accent-red);
}

.alert-info {
  background: rgba(0, 212, 255, 0.1);
  border-left-color: var(--accent-blue);
  color: var(--accent-blue);
}

/* 趋势扩展图表 */
.trend-extension {
  flex: 1;
  min-height: 250px;
}

.small-chart {
  height: 180px;
  width: 100%;
}

/* 中心面板 */
.center-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 主图表容器 */
.main-chart-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.chart-container {
  flex: 1;
  min-height: 400px;
  position: relative;
}

/* 图表控制面板 */
.chart-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-top: 1px solid rgba(0, 212, 255, 0.2);
  margin-top: 15px;
  gap: 20px;
  flex-wrap: wrap;
}

.control-group {
  display: flex;
  align-items: center;
  gap: 20px;
}

.control-group label {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 600;
  min-width: 80px;
}

/* 模拟控制按钮 */
.sim-btn {
  background: var(--gradient-primary);
  color: var(--text-primary);
  border: none;
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.sim-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.sim-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* 自定义选择框 */
.custom-select {
  background: rgba(0, 212, 255, 0.1);
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--text-primary);
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 120px;
}

.custom-select:hover {
  border-color: rgba(0, 212, 255, 0.5);
  background: rgba(0, 212, 255, 0.15);
}

.custom-select:focus {
  outline: none;
  border-color: var(--accent-blue);
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
}

/* 开关按钮 */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
  margin-left: 50px;
  /* 整体向左移动5px，数值可调整（如-10px移更多） */
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  width:50px;
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.2);
  transition: 0.4s;
  border-radius: 24px;
  border: 1px solid rgba(0, 212, 255, 0.3);
  margin-left: -50px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background-color: var(--text-primary);
  transition: 0.4s;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

input:checked+.slider {
  background: var(--gradient-accent);
  border-color: var(--accent-blue);
}

input:checked+.slider:before {
  transform: translateX(26px);
  background-color: var(--text-primary);
  box-shadow: 0 2px 10px rgba(0, 212, 255, 0.5);
}

/* 模拟信息 */
.simulation-info {
  padding: 10px 15px;
  background: rgba(0, 212, 255, 0.1);
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--accent-blue);
  margin-top: 10px;
}

.loading-text {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  font-size: 1.2rem;
  color: var(--text-secondary);
  animation: loadingPulse 1.5s ease-in-out infinite;
}

@keyframes loadingPulse {

  0%,
  100% {
    opacity: 0.5;
  }

  50% {
    opacity: 1;
  }
}

/* 底部状态栏 */
.dashboard-footer {
  height: 60px;
  background: var(--bg-card);
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: 15px;
  padding: 15px 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  backdrop-filter: blur(10px);
}

.footer-info {
  display: flex;
  gap: 30px;
}

.footer-info span {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.update-status {
  font-size: 0.9rem;
  color: var(--accent-green);
  font-weight: 600;
}

/* 响应式设计 */
@media (max-width: 1400px) {
  .dashboard-container {
    padding: 15px;
  }

  .dashboard-header h1 {
    font-size: 2rem;
  }

  .left-panel {
    width: 300px;
  }

  .key-metrics-grid {
    grid-template-columns: 1fr;
  }

  .metric-card .value {
    font-size: 1.5rem;
  }
}

@media (max-width: 1200px) {
  .dashboard-main {
    flex-direction: column;
  }

  .left-panel {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
  }

  .key-metrics-grid {
    grid-template-columns: repeat(4, 1fr);
    min-width: 600px;
  }

  .alert-zone,
  .trend-extension {
    min-width: 300px;
  }

  .chart-controls {
    flex-direction: column;
    gap: 15px;
  }

  .control-group {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 768px) {
  .dashboard-container {
    padding: 10px;
  }

  .dashboard-header h1 {
    font-size: 1.5rem;
    letter-spacing: 1px;
  }

  .system-time {
    font-size: 1rem;
    right: 15px;
  }

  .key-metrics-grid {
    grid-template-columns: 1fr 1fr;
    min-width: auto;
  }

  .metric-card {
    padding: 15px;
  }

  .metric-card .value {
    font-size: 1.3rem;
  }

  .chart-container {
    min-height: 300px;
  }

  .footer-info {
    flex-direction: column;
    gap: 5px;
  }
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--gradient-accent);
  border-radius: 4px;
  transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-blue);
}

/* 选择文本样式 */
::selection {
  background: rgba(0, 212, 255, 0.3);
  color: var(--text-primary);
}

/* 焦点样式 */
*:focus {
  outline: 2px solid rgba(0, 212, 255, 0.5);
  outline-offset: 2px;
}

/* 动画延迟类 */
.animate-delay-1 {
  animation-delay: 0.1s;
}

.animate-delay-2 {
  animation-delay: 0.2s;
}

.animate-delay-3 {
  animation-delay: 0.3s;
}

.animate-delay-4 {
  animation-delay: 0.4s;
}

/* 性能优化 */
.dashboard-container * {
  will-change: transform;
}

.card {
  contain: layout style paint;
}

.chart-container {
  contain: strict;
}
</style>